<template>
    <div class="cart">
        <!-- 购物车 -->
        <div style="float: right;">
            <el-switch
                v-model="useIntegralChange"
                class="mb-2"
                active-text="使用积分"
                inactive-text="不使用积分"
            />
            <el-button style="margin-left: 10px;" @click="useConpons">使用优惠券</el-button>
        </div>
        <el-tabs  v-loading="MainLoading" :element-loading-text="MainLoadingText" v-model="activeName" class="demo-tabs">
            <el-tab-pane label="购买订单" name="first">
                <div class="cartTable">
                    <el-table border v-loading="loading" :data="tableData" style="width: 100%">
                        <el-table-column prop="serialId" label="流水单号" width="190" />
                        <el-table-column prop="sname" label="商品名" width="190" />
                        <el-table-column prop="countBuy" label="购买个数" width="190" />
                        <el-table-column prop="price" label="价格" width="190" />
                        <el-table-column prop="uname" label="用户账号" width="190" />
                        <el-table-column label="付款状态" width="190">
                            <template #default="scope">
                                <span v-if="scope.row.buyState==0">未付款</span>
                                <span v-if="scope.row.buyState==1">已付款</span>
                                <span v-if="scope.row.buyState==2">异常</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="更新时间" width="150" />
                        <el-table-column fixed="right" label="操作" width="220">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="nowPay(scope.row,(scope.row.price * scope.row.countBuy),scope.row.sname)">付款</el-button>
                            <el-button type="primary" size="small" @click="handleClick(scope)">详情</el-button>
                            <el-button type="danger" size="small" @click="deleteClick(scope)">取消</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="线上挂号" name="second">
                <div class="contentMark" v-if="contentMark">
                    <span id="cancelMark" @click="canelMark">X</span>
                    <div>编号：<span>{{ contentMark.id }}</span></div>
                    <div>排队号：<span id="line">{{ contentMark.num }}</span></div>
                    <div>部门：<span>{{ contentMark.depName }}</span></div>
                    <div>挂号时间：<span>{{ contentMark.createTime }}</span></div>
                </div>
                <div v-else class="contentMark">
                    <div style="font-size: 18px;">当前无挂号信息</div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="预约上门" name="three">
                <div class="cartTable">
                    <el-table border v-loading="loading_Door" :data="UpDoorData" style="width: 100%">
                        <el-table-column prop="serialId" label="单号" width="190" />
                        <el-table-column prop="depName" label="部门" width="130" />
                        <el-table-column prop="dname" label="工作人员" width="130" />
                        <el-table-column prop="sstate" label="状态" width="130">
                            <template #default="scope">
                                <span v-if="scope.row.sstate==0">进行中</span>
                                <span v-else-if="scope.row.sstate==1">完成</span>
                                <span v-else-if="scope.row.sstate==2">异常</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startTime" label="开始时间" width="160" />
                        <el-table-column prop="endTime" label="结束时间" width="160" />
                        <el-table-column prop="address" label="地址" width="200" />
                        <el-table-column prop="price" label="价格" width="100"/>
                        <el-table-column prop="descrs" label="备注" width="220" />
                        <el-table-column prop="createTime" label="创建时间" width="190" />
                        <el-table-column fixed="right" label="操作" width="220">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="nowPay(scope.row,scope.row.price)">付款</el-button>
                            <el-button type="primary" size="small" @click="EditUpDoor(scope)">修改</el-button>
                            <el-button type="danger" size="small" @click="deleteDoor(scope.row)">取消</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-drawer
            v-model="drawer"
            title="修改"
            direction="rtl"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="部门">
                        <el-input disabled v-model="fromData.depName" />
                    </el-form-item>
                    <el-form-item label="工作人员">
                        <el-select
                                v-model="fromData.dname"
                                filterable
                                placeholder="请选择工作人员">
                                <el-option
                                    v-for="(item,index) in hs_employees"
                                    :key="index"
                                    :label="item.userName"
                                    :value="item.Id"/>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="fromData.sstate" :disabled="!user || (user.Id !== fromData.id && user.Id == fromData.did)" placeholder="请选择">
                            <el-option label="进行中" value="0" />
                            <el-option label="完成" value="1" />
                            <el-option label="异常" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input @focus="selectArea" v-model="fromData.address" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="fromData.descrs" type="textarea"  />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="drawer=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <el-dialog
            v-model="dialogVisible"
            title="选择地点"
            width="30%"
            height="300px"
        >
           <div class="map">
                <Map @addr="Getaddr($event)" :Area="dialogVisible"></Map>
           </div>
        </el-dialog>
        <el-dialog
            v-model="dialog.dialogImages"
            title="扫码付款"
            width="25%">
            <div>
                <div class="dialogImage">
                    <img :src="dialog.PictureSrc" />
                </div>
                <div class="dialogPrice">
                    价格：<span>{{dialog.realityPrice}}￥</span>
                </div>
                <div v-if="coupons.name!=null">优惠券：<span>{{ coupons.name }}</span>,金额：{{coupons.price}}</div>
            </div>
        </el-dialog>
        <el-dialog
            v-model="dialogConpon"
            title="优惠券"
            width="40%">
            <div>
                <el-scrollbar height="206px">
                        <ul class="dialogConpons">
                            <li><span class="useConpons" style="display: block;float: right;height: 30px; overflow: hidden;width: 100px;" @click="UseCurrentConpons(-1)">不使用优惠券</span></li>
                            <li style="margin: 3px 0;">
                                <div class="coupons_show">
                                    <div style="text-align: center; display: flex;line-height: 30px;justify-content: space-around;">
                                        <span style="width: 80px;">名称</span>
                                        <span style="width: 30px;">金额</span>
                                        <span style="width: 200px;">过期时间</span>
                                        <span>使用情况</span>
                                    </div>
                                </div>
                            </li>
                            <li 
                                v-for="(item,index) in CouponsData" 
                                :key="index" 
                                style="margin: 3px 0;" 
                                :class="{couponsExpire:(item.coupon&&item.coupon.isExpire==1)}">
                                <div class="coupons_show">
                                    <div v-if="item.coupon!=null" style="text-align: center;display: flex;line-height: 30px;justify-content: space-around;">
                                        <span style="width: 80px;">{{ item.coupon.name }}</span>
                                        <span style="width: 30px;">{{ item.coupon.amount }}￥</span>
                                        <span style="width: 200px;">{{ item.coupon.endTime }}</span>
                                        <span class="useConpons" v-if="item.useState==0" @click="UseCurrentConpons(item)">使用</span>
                                        <span class="useConpons" v-else-if="item.useState==1" style="color: rgb(108 115 116);">已使用</span>
                                        <span class="useConpons" v-else-if="item.useState==2" style="color: #e79615;">异常</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                </el-scrollbar>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useStore } from 'vuex'
import Map from './assist/map'
export default defineComponent({
    components:{
        Map
    },
    data(){
        return{
            tableData:[],
            UpDoorData:[],
            CouponsData:[],
            coupons:{
                cid:0,
                cuid:0,
                name:null,
                price:''
            },
            hs_employees:[],
            dialogConpon:false,
            activeName:'first',
            contentMark:null,
            loading:false,
            MainLoading:false,
            MainLoadingText:"正在获取支付信息...",
            loading_Door:false,
            dialog:{
                dialogImages:false,
                PictureSrc:null,
                realityPrice:0.0
            },
            user:null,
            drawer:false,
            useIntegralChange:false,
            fromData:{
                dname:' '
            },
            dialogVisible:false
        }
    },
    setup() {
        // 路由
        const router = useRouter();
        const route = useRoute();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            router,
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
        this.loadData();
        this.loadBusData();
        this.loadUpDoorData();
        this.SelectDid()
    },
    methods:{
        loadData(){
            let self = this;
            let row = {
                uid:this.user.Id
            }
            self.$http.post(`${self.baseUrl}/cart/selectName`,row).then(res=>{
                self.tableData = res.data.document;
            })
        },
        loadBusData(){
            let self = this;
            // serviceId是业务的标识，1代表挂号业务，这里只查询挂号数据即可
            self.$http.get(`${self.baseUrl}/business/ByUidAndService?uid=${this.user.Id}&serviceId=1`).then(res=>{
                self.contentMark = res.data.data[0];
            })
        },
        loadUpDoorData(){
            let self = this;
            let row = {
                uid:this.user.Id,
                serviceId:2
            }
            self.$http.post(`${self.baseUrl}/business/ConditionQuery`,row).then(res=>{
                self.UpDoorData = res.data;
            })
        },
        loadCouponsData(){
            let self = this;
            let row = {
                uid:this.user.Id
            }
            self.$http.post(`${self.baseUrl}/coupons/descQueryCouponsUser`,row).then(res=>{
                self.CouponsData = res.data;
            })
        },
        useConpons(){
            this.dialogConpon = true;
            this.loadCouponsData();
        },
        UseCurrentConpons(msg){
            this.coupons.cuid = 0;
            this.coupons.name = null;
            this.coupons.price = 0;
            this.coupons.cid = 0;
            if(msg == -1){
                return;
            }
            if(msg.coupon.isExpire == 1){
                ElMessage({
                    message:`优惠券过期`,
                    type:'error'
                })
                return;
            }
            ElMessage({
                message:`使用${msg.coupon.name}券`,
                type:'success'
            })
            this.coupons.cuid = msg.id;
            this.coupons.name = msg.coupon.name;
            this.coupons.price = msg.coupon.amount;
            this.coupons.cid = msg.coupon.id;
        },
        /**
         * 立即付款
         * @param {*} msg 
         * @param {*} price 
         * @param {*} title 
         * cid : 优惠券表的id
         * cuid : 优惠券和用户关联表中id
         */
        nowPay(msg,price,title="服务付款"){
            let self = this;
            if(self.user == null){
                ElMessage({
                    message:"请先登录",
                    type:'warning'
                })
                return;
            }
            let row = {
                uid:self.user.Id,
                title:title,
                serialId:msg.serialId,
                price:Math.max(price,0.0),
                cid:self.coupons.cid,
                cuid:self.coupons.cuid,
                isFlag:self.useIntegralChange
            }
            self.MainLoading = true;
            self.$http.post(`${self.baseUrl}/pay`,row).then(res=>{
                if(res.data.code == "40004"){
                    ElMessage({
                        message:res.data.sub_msg,
                        type:'success'
                    })
                }else{
                    self.MainLoading = false;
                    self.dialog.dialogImages = true;
                    self.dialog.PictureSrc = "data:image/jpeg;base64," + res.data.images;
                    self.dialog.realityPrice = res.data.price;
                }
            })
        },
        SelectDid(){
            let self = this;
            // 查找指定的护士
            self.$http.get(`${self.baseUrl}/empinfo/ByIdentifyAndText?text=${self.fromData.dname}&identify=4`).then(res=>{
                self.hs_employees = res.data;
            })
        },
        selectArea(){
            this.dialogVisible = true;
        },
        handleClick(msg){
            this.store.commit("basicGoodsId",msg.row.sid);
            this.router.push({path:"/goodsDetail"});
        },
        EditUpDoor(msg){
            this.drawer = true;
            this.fromData = msg.row;
            this.fromData.sstate += ''
        },
        Getaddr(msg){
            let { lng , lat} = msg.point;
            this.fromData.address = `${msg.address}-${msg.title}`;
            this.fromData.lal = `[${lng},${lat}]`
        },
        onSubmit(){
            let self = this;
            let row = {
                did:self.fromData.did,
                service:2,
                sState:self.fromData.sState,
                lal:self.fromData.lal,
                address:self.fromData.address,
                descrs:self.fromData.descrs
            }
            self.$http.post(`${self.baseUrl}/business/addBusiness`,row).then(res=>{
                ElMessage({
                    message:res.data.msg,
                    type:'success'
                })
            })
        },
        deleteDoor(msg){
            let self = this;
            ElMessageBox.confirm(`确定要取消上门订单吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/business/deleteBus?id=${msg.id}`).then(res=>{
                    if(res.data!=0){    
                        ElMessage({
                            message:"上门订单取消成功",
                            type:'success'
                        })
                        self.loadUpDoorData();
                    }else{
                        ElMessage({
                            message:"上门订单取消失败",
                            type:'error'
                        })
                    }
                }) 
            })
        },
        canelMark(){
            let self = this;
            ElMessageBox.confirm(`确定要取消预约吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/business/deleteBus?id=${self.contentMark.id}`).then(res=>{
                    if(res.data!=0){    
                        ElMessage({
                            message:"预约取消成功",
                            type:'success'
                        })
                        self.loadBusData();
                    }else{
                        ElMessage({
                            message:"预约取消失败",
                            type:'error'
                        })
                    }
                }) 
            }).catch(() => {})
        },
        deleteClick(msg){  
            let self = this;
            ElMessageBox.confirm(`确定要取消订单吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/cart/deleteCart?id=${msg.row.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"订单取消成功",
                            type:'success'
                        })
                        self.loadData();
                    }else{
                        ElMessage({
                            message:"订单取消失败",
                            type:'error'
                        })
                    }
                }) 
            }).catch(() => {})

        }
    }
})
</script>
<style scoped>
    .el-tab-pane{
        height: calc(576px - 15px);
        background-color: #7f9cb9;
        overflow: hidden;
    }
    .cartTable{
        overflow: hidden;
        border-radius: 10px;
        height: calc(576px - 15px);
    }
    .el-table{
        width: 100%;
        height: calc(576px - 15px);
    }
    .demo-tabs{
        overflow: hidden;
        width: 100%;
    }
    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    .contentMark{
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0px 1px 7px 3px #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        line-height: 42px;
        font-size: 20px;
        position: relative;
        color: #504949;
    }
    .dialogImage{
        display: flex;
        justify-content: center;
    }
    .dialogPrice{
        text-align: right;
    }
    .dialogPrice span{
        color: #e11b0d;
        font-size: 17px;
    }
    .contentMark div{
        font-size: 16px;
        text-align: left;
        width: 20%;
    }
    .contentMark div span{
        color: #656565;
        font-size: medium;
    }
    #line{
        color: #f90606;
        font-size: larger;
    }
    #cancelMark{
        position: absolute;
        width: 20px;
        height: 20px;
        right: 10px;
        top: 10px;
        font-size: 12px;
        cursor: pointer;
    }
    .map{
        width: 100%;
        height: 300px;
    }
    .useConpons{
        width: 66px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: red;
        border-radius: 10px;
        cursor: pointer;
    }
    .dialogConpons li{
        list-style-type: none;
        display: block;
        width: 98%;
        margin: 5px auto;
        overflow: hidden;
    }
    .couponsExpire{
        background-color: #ccc;
        border-radius: 10px;
    }
</style>